<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/metro-bootstrap/3.1.1.2/css/metro-bootstrap.min.css"/>
		<link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.css">
		<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
		<script src="http://cdn.bootcss.com/jquery/2.1.3/jquery.js"></script>
		<title>metro-bootstrap使用测试</title>
	</head>
	<body>
		<div class="container">
			<ol class="breadcrumb">
			  <li><a href="index.html">Home</a></li>
			  <li class="active">tile</li>
			</ol>
			<!--
            	作者：opev@foxmail.com
            	时间：2015-01-18
            	描述：tile简单使用
            -->
			<div class="row">
				<div class="col-sm-6 col-md-3">
				<div class="thumbnail tile tile-medium tile-teal">
					<a href="#" >
						<h1>你好</h1>
						</a>
					</div>
				</div>
				<div class="col-sm-6 col-md-3">
					<div class="thumbnail tile tile-medium">
						<a href="#" >
							<img src="images/twittertile.png">
							<h2>
							Tweet
							</h2>
						</a>
					</div>
				</div>
				<div class="col-sm-6 col-md-6">
					<div class="thumbnail tile tile-wide tile-orange">
						<a href="#" >
							<h1 class="tile-text">
								测试!</h1>
						</a>
					</div>
				</div>
			</div>
			<div class="row">
			        <div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-blue col-md-3">
							<a href="#">
								<h1>blue
								</h1>
							</a>
						</div>
			        </div>
					<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-green col-md-3">
							<a href="#">
								<h1>green
								</h1>
							</a>
						</div>
			        </div>
					<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-red col-md-3">
							<a href="#">
									<h1>red
								</h1>
							</a>
						</div>
			        </div>
					<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-yellow col-md-3">
							<a href="#">
									<h1>yellow
								</h1>
							</a>
						</div>
			        </div>
					<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-pink col-md-3">
							<a href="#">
									<h1>pink
								</h1>
							</a>
						</div>
			        </div>
					<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-purple col-md-3">
							<a href="#">
									<h1>purple
								</h1>
							</a>
						</div>
			        </div>
					<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-lime col-md-3">
							<a href="#">
									<h1>lime
								</h1>
							</a>
						</div>
			        </div>
					<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-magenta col-md-3">
							<a href="#">
									<h1>magenta
								</h1>
							</a>
						</div>
			        </div>
					<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-teal col-md-3">
							<a href="#">
									<h1>teal
								</h1>
							</a>
						</div>
			        </div>
					<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-turquoise col-md-3">
							<a href="#">
									<h1>turquoise
								</h1>
							</a>
						</div>
			        </div>
					<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-green-sea col-md-3">
							<a href="#">
									<h1>green sea
								</h1>
							</a>
						</div>
			        </div>
					<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-emerald col-md-3">
							<a href="#">
									<h1>emerald
								</h1>
							</a>
						</div>
			        </div>
					<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium nephritis col-md-3">
							<a href="#">
									<h1>nephritis
								</h1>
							</a>
						</div>
			        </div>
					<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-peter-river col-md-3">
							<a href="#">
									<h1>peter river
								</h1>
							</a>
						</div>
			        </div>
					<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-belize-hole col-md-3">
							<a href="#">
									<h1>belize hole
								</h1>
							</a>
						</div>
			        </div>
					<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-amethyst col-md-3">
							<a href="#">
									<h1>amethyst
								</h1>
							</a>
						</div>
			        </div>
					<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-wisteria col-md-3">
							<a href="#">
									<h1>wisteria
								</h1>
							</a>
						</div>
			        </div>
					<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-wet-asphalt col-md-3">
							<a href="#">
									<h1>wet asphalt
								</h1>
							</a>
						</div>
			        </div>
					<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-midnight-blue col-md-3">
							<a href="#">
									<h1>midnight blue
								</h1>
							</a>
						</div>
			        </div>
							<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-sun-flower col-md-3">
							<a href="#">
									<h1>sun flower
								</h1>
							</a>
						</div>
			        </div>
							<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-orange col-md-3">
							<a href="#">
									<h1>orange
								</h1>
							</a>
						</div>
			        </div>
							<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-carrot col-md-3">
							<a href="#">
									<h1>carrot
								</h1>
							</a>
						</div>
			        </div>
							<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-pumpkin col-md-3">
							<a href="#">
									<h1>pumpkin
								</h1>
							</a>
						</div>
			        </div>
							<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-alizarin col-md-3">
							<a href="#">
									<h1>alizarin
								</h1>
							</a>
						</div>
			        </div>
							<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-pomegranate col-md-3">
							<a href="#">
									<h1>pomegranate
								</h1>
							</a>
						</div>
			        </div>
					<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-clouds col-md-3">
							<a href="#">
									<h1>clouds
								</h1>
							</a>
						</div>
			        </div>
					<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-silver col-md-3">
							<a href="#">
									<h1>silver
								</h1>
							</a>
						</div>
			        </div>
					<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-concrete col-md-3">
							<a href="#">
									<h1>concrete
								</h1>
							</a>
						</div>
			        </div>
					<div class="col-sm-6 col-md-3">
						<div class="thumbnail tile tile-medium tile-asbestos col-md-3">
							<a href="#">
									<h1>asbestos
								</h1>
							</a>
						</div>
			        </div>
			</div>
			<div class="row">
				<div class="col-sm-6 col-md-3">
					<div class="thumbnail tile tile-medium tile-green">
				        <a href="#" class="fa-links">
				            <h1>Home</h1>
				                <i class="fa fa-3x fa-home"></i>
						</a>
				    </div>
				</div>
				<div class="col-sm-6 col-md-3">
					<div class="thumbnail tile tile-medium tile-orange">
				        <a href="#" class="fa-links">
				            <h1>RSS</h1>
				                <i class="fa fa-3x fa-rss-square"></i>
						</a>
					</div>
				</div>
			</div>
			
			
			
			
			
			
			
		</div>
	</body>
</html>
